<template>
  <div class="box">
    <div class="banner">
      <van-swipe class="my-swipe" duration="1000" :autoplay="2000">
        <!-- 轮播图的图片 -->
        <van-swipe-item v-for="(i, index) in images" :key="index">
          <router-link
            :to="{
              path: `/await`,
              query: {
                item: i,
              },
            }"
          >
            <van-image v-lazy :src="i.pic" />
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
    <BorderTitle>推荐歌单</BorderTitle>
    <ul class="liList" v-if="songList.length > 0">
      <li v-for="sl in songList" :key="sl.id">
        <ListItem :item="sl"></ListItem>
      </li>
    </ul>
    <Loading v-if="songList.length == 0"></Loading>

    <BorderTitle>最新音乐</BorderTitle>
    <ul class="newsong" v-if="newSong.length > 0">
      <li v-for="(s, index) in newSong" :key="s.id">
        <span>{{ index + 1 }}</span>
        <SongItem :item="s" @add-list="addMusicList(newSong)"></SongItem>
      </li>
    </ul>
    <Loading v-if="newSong.length == 0"></Loading>
  </div>
</template>

<script>
import BorderTitle from "../components/BorderTitle";
import ListItem from "@/components/ListItem";
import SongItem from "@/components/SongItem";
import Loading from "@/components/myLoading";

export default {
  name: "Recommend",

  data() {
    return {
      songList: [],
      newSong: [],
      images: [],
    };
  },
  created() {
    this.$axios
      .get("/personalized?limit=9")
      .then((data) => {
        this.songList = data.data.result;
      })
      .catch((err) => {
        console.log(err);
      });

    this.$axios.get("/personalized/newsong?limit=20").then((data) => {
      this.newSong = data.data.result;
    });
    this.$axios.get("/banner?type=1").then((data) => {
      this.images = data.data.banners;
    });
  },
  components: {
    BorderTitle,
    ListItem,
    SongItem,
    Loading,
  },
  methods: {
    addMusicList(newSong) {
      let newArr = this.$root.musicStore.musicList;
      newSong.map((d) => {
        let find = false;
        for (let n of newArr) {
          if (n.id == d.id) {
            find = true;
            break;
          }
        }
        if (!find) newArr.push(d);
      });
      this.$root.musicStore.musicList = newArr;
    },
  },
};
</script>

<style lang="less" scoped>
.liList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    width: 33%;
  }
}

.newsong {
  li {
    display: flex;
    &:first-of-type {
      span {
        color: yellow;
      }
    }
    &:nth-of-type(2) {
      span {
        color: #c0c0c0;
      }
    }
    &:nth-of-type(3) {
      span {
        color: rgb(233, 183, 124);
      }
    }
    span {
      display: inline-block;
      line-height: 50px;
      margin: 0 8px;
      color: rgb(100, 100, 100);
    }

    div {
      flex: 1;
    }
  }
}

.banner {
  padding: 10px 5px;
  box-sizing: border-box;
}
</style>